<template>
    <div class="table">
        <div class="container">
            <div class="handle-box" style="">
                <!--<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>-->
                <!--<el-button type="primary" icon="search" @click="search">搜索</el-button>-->
                <el-select v-model="question_bank_id" placeholder="请选择" size="mini">
                    <el-option
                        v-for="(item,index) in questionBankList"
                        :key="index"
                        :label="item.question_bank_name"
                        :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="type" placeholder="请选择" size="mini" style="width: 120px;">
                    <el-option label="单选" value="1"></el-option>
                    <el-option label="多选" value="2"></el-option>
                    <el-option label="判断" value="3"></el-option>
                    <el-option label="填空" value="4"></el-option>
                </el-select>
                <el-input type="number" v-model="num" placeholder="题目数量" class="handle-input mr10" size="mini" style="width: 120px;"></el-input>
                <el-input type="number" v-model="total_score" placeholder="总分数" class="handle-input mr10" size="mini" style="width: 120px;"></el-input>
                <el-button type="primary" @click="add" style="">添加规则</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable">
                <el-table-column prop="name" sortable label="模板"></el-table-column>
                <el-table-column prop="question_bank_name" label="题库名称"></el-table-column>
                <el-table-column label="题目类型">
                    <template slot-scope="scope">
                        <span>{{scope.row.type | typeFilter}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="num" label="数量"></el-table-column>
                <el-table-column prop="total_score" label="总分数"></el-table-column>
                <el-table-column label="操作" width="210" align="center" fixed="right">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            <!--<el-button type="text" icon="el-icon-search" @click="getQrCode(scope.$index, scope.row)">考试二维码</el-button>-->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--<div class="pagination">-->
            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="totalRow">-->
            <!--</el-pagination>-->
            <!--</div>-->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        components:{
        },
        name: 'paper',
        data() {
            return {
                question_bank_id: '',
                type: '',
                num: '',
                total_score: '',

                tableData: [],
                pageSize: 0,
                totalRow: 0,
                currentPage: 1,
                questionBankList: [],

                paperId: '',
            }
        },
        computed: {
            data() {
            }
        },
        props: ['uid'],
        filters: {
            typeFilter(inp){
                let str = '';
                if(inp=='1') str='单选';
                if(inp=='2') str='多选';
                if(inp=='3') str='判断';
                if(inp=='4') str='填空';
                return str;
            }
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 改变pageSize
            handleSizeChange(){},
            // 分页导航
            handleCurrentChange(val) {
                this.getData(val);
            },
            getInfo(){
                this.getBankList();
                this.getData(1);
            },
            // 获取列表数据
            getData(pageNumber) {
                this.loadopen();
                this.config.post('/admin/examinationmoderole/findPage', {
                    modeId: this.uid,
                    pageNum: pageNumber?pageNumber:1,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.tableData = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.pageNumber = res.data.page.pageNumber;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            getBankList(){
                this.config.get('/admin/examinationmoderole/findQuestionBankList', {}).then(res=>{
                    if(res.data.code==='0'){
                        this.questionBankList = res.data.questionBankList;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            // 添加规则
            add(){
                // console.log(this.question_bank_id, this.type, this.num, this.total_score)
                if(!this.question_bank_id) return;
                if(!this.type) return;
                if(!this.num) return;
                if(!this.total_score) return;
                let obj = {
                    'examinationModeRole.mode_id': this.uid,
                    'examinationModeRole.question_bank_id': this.question_bank_id,
                    'examinationModeRole.type': this.type,
                    'examinationModeRole.num': this.num,
                    'examinationModeRole.total_score': this.total_score,
                };
                this.loadopen();
                this.config.post2('/admin/examinationmoderole/add', obj).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getData();
                        this.question_bank_id = '';
                        this.type = '';
                        this.num = '';
                        this.total_score = '';
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            handleDelete(index, row) {
                this.$confirm('确定删除此规则?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post2('/admin/examinationmoderole/delete', {id: row.id}).then(res=>{
                        this.loadclose();
                        if(res.data.code==='0'){
                            this.$message.success(res.data.message);
                            this.getData();
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                }).catch(() => {
                });
            },
            roleDone(str) {
                this.editVisible = false;
                this.getData();
            },
        },
        mounted(){
            this.getData(1);
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
</style>
